import React, { FC, useState, useEffect } from 'react'
import { message, Tabs, Modal, Form, Input, Button } from 'antd'

import { getUserInfo } from '~/mock/user/userinfo'
import TopHeader, { ListTitle } from '~/components/top-header'
import { voucherRecord } from '~/api/query-api'

import { ObtainSingleVoidableCertificate, ExecuteVoidVoucherOperation } from '~/api/accessibility-api'
import { queryCertificate } from '~/api/approve-api'

import WaitingList from './container/waiting-list'
import { useNavigate, useLocation } from 'react-router-dom'
import { FooterAction } from '~/pages/property-management-page/handle-property-detail/styled'

const { TabPane } = Tabs
let voidRecord: any = {}

const PropertyInvolved: FC = () => {
  const [form] = Form.useForm()
  const { validateFields } = form
  const [waitCastItems, setWaitCastItems] = useState([])
  const [certificateVisible, setCertificateVisible] = useState(false)
  const navigate = useNavigate()
  const { state, pathname }: any = useLocation()

  const { caseCompanyName, caseDepartmentName, caseName, caseNo, activeKey = '1' } = state || { activeKey: '1' }

  const handleGetueryWaitCastItems = async () => {
    const userInfo = getUserInfo()
    const { data } = await voucherRecord({
      ...userInfo,
      sortOrder: 1,
      caseName,
      caseNo
    })
    setWaitCastItems(data)
  }

  const onClickViewCertificate = async (record: any) => {
    const { voucherId } = record
    if (!voucherId) return message.info('无相关凭证')
    const { data } = await queryCertificate({ voucherId })
    window.open(data)
  }
  const onClickVoidCertificate = async (record: any) => {
    const { voucherId } = record
    await ObtainSingleVoidableCertificate({ voucherId })
    setCertificateVisible(true)
    voidRecord = record
    // if (!record.userPics || !JSON.parse(record.userPics).length) return message.info('无相关人员')
    // const { data } = await queryCertificate({ voucherId })
    // console.log('borrowVoucherId', data)
    // window.open(data)
  }
  const onClickSaveSetting = async () => {
    const { reason } = await validateFields()
    await ExecuteVoidVoucherOperation({ reason, voucherId: voidRecord.voucherId })
    handleGetueryWaitCastItems()
    setCertificateVisible(false)
    message.success('作废凭证成功')
  }

  useEffect(() => {
    handleGetueryWaitCastItems()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const headData = [
    {
      childen: [
        {
          label: '案件编号:',
          value: caseNo
        },
        { label: '案件名称:', value: caseName }
      ]
    },
    {
      childen: [
        { label: '办案单位:', value: caseCompanyName },
        { label: '办案部门:', value: caseDepartmentName }
      ]
    }
  ]

  return (
    <div>
      <TopHeader headData={headData} />
      <ListTitle title="作废凭证列表" />
      <main style={{ marginTop: 21 }}>
        <Tabs
          activeKey={activeKey}
          onChange={(activeKey: string) => {
            navigate(pathname, { replace: true, state: { ...state, activeKey } })
          }}
        >
          <TabPane tab={<span>作废凭证列表</span>} key="1">
            <WaitingList
              onClickViewCertificate={onClickViewCertificate}
              onClickVoidCertificate={onClickVoidCertificate}
              waitCastItems={waitCastItems}
              setCertificateVisible={setCertificateVisible}
            />
          </TabPane>
        </Tabs>
      </main>
      <Modal
        visible={certificateVisible}
        onOk={onClickSaveSetting}
        onCancel={() => {
          setCertificateVisible(false)
        }}
      >
        <Form validateTrigger="onBlur" form={form} style={{ marginTop: 36 }}>
          {/* <Form.Item name="whereabouts" label="物品去向">
            <Select
              onChange={val => {
                setIsShowRemark(val === 'OTHER')
              }}
            >
              {[...WhereaboutsItemsMap].map(([key, value], index) => (
                <Option key={index} value={key}>
                  {value}
                </Option>
              ))}
            </Select>
          </Form.Item> */}
          <Form.Item rules={[{ required: true, message: '请输入作废原因' }]} name="reason" label="作废原因">
            <Input placeholder="请输入作废原因" />
          </Form.Item>
        </Form>
      </Modal>
      <FooterAction>
        <div >
          <Button  onClick={() => navigate(-1)}>返回</Button>
        </div>
      </FooterAction>
    </div>
  )
}

export default PropertyInvolved
